<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="../css/shoppingcart.css" />
    <script src="../js/jquery-3.1.1.min.js"></script>

</head>
<body>
<div class="body">
    <div class="shop"><i></i><span>我的购物车</span></div>
    <div class="product">
        <div class="product-box">
            <div class="product-ckb"><em class="product-em product-xz checked"></em></div>
            <div class="product-sx" id="product1">
                <a href="###">
                    <img src="../image/a3.png" class="product-img" />
                    <span class="product-name">酷冷至尊(Cooler Master)T610P CPU风冷散热器</span>
                </a>
                <span class="product-price">¥&thinsp;<span class="price">299</span></span>
                <div class="product-amount">
                    <div class="product_gw">
                        <em class="product-jian">-</em>
                        <input type="text" value="1" class="product-num" id="num1"/>
                        <em class="product-add">+</em>
                    </div>
                </div>
                <div class="product-del"><img src="../image/deleteico.png" /></div>
            </div>
        </div>
        <div class="product-box">
            <div class="product-ckb"><em class="product-em"></em></div>
            <div class="product-sx" id="product2">
                <a href="###">
                    <img src="../image/a1.png" class="product-img" />
                    <span class="product-name">游戏悍将 35英寸曲面电竞显示器21:9带鱼屏准4K游戏显示器</span>
                </a>
                <span class="product-price">¥&thinsp;<span class="price">2099</span></span>
                <div class="product-amount">
                    <div class="product_gw">
                        <em class="product-jian">-</em>
                        <input type="text" value="1" class="product-num" id="num2"/>
                        <em class="product-add">+</em>
                    </div>
                </div>
                <div class="product-del"><img src="../image/deleteico.png" /></div>
            </div>
        </div>

        <div class="product-box">
            <div class="product-ckb"><em class="product-em"></em></div>
            <div class="product-sx" id="product3">
                <a href="###">
                    <img src="../image/a2.png" class="product-img" />
                    <span class="product-name">技嘉（GIGABYTE） 2080TURBO OC 8GC</span>
                </a>
                <span class="product-price">¥&thinsp;<span class="price">1099</span></span>
                <div class="product-amount">
                    <div class="product_gw">
                        <em class="product-jian">-</em>
                        <input type="text" value="1" class="product-num" id="num3"/>
                        <em class="product-add">+</em>
                    </div>
                </div>
                <div class="product-del"><img src="../image/deleteico.png" /></div>
            </div>
        </div>

        <div class="product-box">
            <div class="product-ckb"><em class="product-em"></em></div>
            <div class="product-sx" id="product4">
                <a href="###">
                    <img src="../image/a4.png" class="product-img" />
                    <span class="product-name">AMD 锐龙 5 2600X 处理器 (R5) 6核12线程 AM4 </span>
                </a>
                <span class="product-price">¥&thinsp;<span class="price">1299</span></span>
                <div class="product-amount">
                    <div class="product_gw">
                        <em class="product-jian">-</em>
                        <input type="text" value="1" class="product-num" id="num4"/>
                        <em class="product-add">+</em>
                    </div>
                </div>
                <div class="product-del"><img src="../image/deleteico.png" /></div>
            </div>
        </div>
    </div>
    <div class="product-js">
        <div class="product-al">
            <div class="product-all">
                <em class="all "></em>
            </div>
            <div class="all-xz"><span class="product-all-qx">全选</span>
                <div class="all-sl" style="display: inline-block;">(<span class="product-all-sl">1</span>)</div>
            </div>
        </div>
        <a href="#" class="product-sett product-sett-a" style="background-color: red">结算</a>
        <div class="all-product" ><span class="all-product-a">¥&thinsp;<span class="all-price">299</span></span></div>

    </div>
</div>
<!--购物车空-->
<!--179000612陈攀文-->
<div class="kon-cat">
    <div class="catkon">
        <div class="kon-box">
            <div class="kon-hz">
                <img src="../image/cart-air.png" />
                <span class="kon-wz">购物车什么都没有</span>
                <a href="###" class="kon-lj">去逛逛</a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

        //价格控制
        function price() {
            let $product = $(".product-box").find("div[id]");
            let summer = 0;
            $product.each(function(i,dom) {
                let checked=$(dom).prev().children().attr("class");
                //判断是否被选中
                if(checked.indexOf("checked")>=0){
                    let num = $(dom).parent().find("input").val(); //商品数量
                    let price = num*$(dom).children(".product-price").children(".price").text(); //商品小计
                    summer += price; //总价
                }
            });
            $(".all-price").text(summer);
        }

        //商品增加减少 ，flag 为true时增加 flag为false时减少
        function changN(dom, flag) {
            let value=$(dom).siblings("input").val();
            if(flag) {
                value++;
            } else {
                value--;
                if(value < 1) {
                    value = 1;
                    alert("宝贝数量不能为负值")
                }
            }
            $(dom).siblings("input").val(value);
            price();
        }

        price();

        //点击增加
        $(".product-add").click(function() {
            changN(this, true);
        });
        //点击减少
        $(".product-jian").click(function() {
            changN(this, false);
        });

        //点击删除
        $(".product-del").click(function() {
            if (confirm('确定要删除该行信息?')){
                $(this).parent().parent().remove(); //删除当前商品div
                price();
            }
            let product=$(".product-box").length;
            console.log(product);
            if (product==0){
                $(".kon-cat").css("display","inline-block");
            }
        });

        // 选中
        $(".product-em").click(function () {
            $(this).toggleClass("product-xz checked");
            price();
            let checked=$(".checked");
            let cknum=checked.length;
            if (cknum==0){
                $(".product-sett-a").css("background-color","gray");
            }else {
                $(".product-sett-a").css("background-color","red");
            }
            $(".product-all-sl").text(cknum);


        });
        //全选
        function handler1() {
            $(".all").addClass("product-all-on");
            $(".product-em").addClass("product-xz checked");
            price();
            $(".all").one("click", handler2);
            let checked=$(".checked");
            let cknum=checked.length;
            if (cknum==0){
                $(".product-sett-a").css("background-color","gray");
            }else {
                $(".product-sett-a").css("background-color","red");
            }
            $(".product-all-sl").text(cknum);
        }
        function handler2() {
            $(".all").removeClass("product-all-on");
            $(".product-em").removeClass("product-xz checked");
            $(".all").one("click", handler1);
            price();
            let checked=$(".checked");
            let cknum=checked.length;
            if (cknum==0){
                $(".product-sett-a").css("background-color","gray");
            }
            else {
                $(".product-sett-a").css("background-color","red");
            }
            $(".product-all-sl").text(cknum);
        }
        $(".all").one("click", handler1);

    });
</script>
</body>
</html>
